<!--[if IE 8 ]><html class="ie" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!-->
<!DOCTYPE html>
<html lang="en-US">
<!--<![endif]-->

<head>
	<meta charset="utf-8">
	<title>Home</title>
	<meta content="yes" name="apple-mobile-web-app-capable">
	<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
	<!-- Core Meta Data -->

	<link href="favicon.png" rel="shortcut icon" type="image/png">

	<!--[if lt IE 9]>
	<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

	<!-- CSS -->
	<link href='http://fonts.googleapis.com/css?family=Roboto:400,100,900' rel='stylesheet' type='text/css'>
	<!-- Styles -->
	<link href="css/loader.css" rel="stylesheet" type="text/css">
	<link href="css/normalize.css" rel="stylesheet" type="text/css">
	<link rel="stylesheet" href="css/font-awesome.min.css">
	<link href="css/style.css" rel="stylesheet" type="text/css">
	<!--[if lt IE 9]>
	<link rel="stylesheet" type="text/css" href="css/ie.css" />
<![endif]-->
	<!-- Javascript -->

	<script src="js/jquery.js"></script>
</head>

<body class="jq22">
	<div class="preloader">
		<div class="loading">
			<h2>
				Loading...
			</h2>
			<span class="progress"></span>
		</div>
	</div>

	<div class="wrapper">
		<ul class="scene unselectable" data-friction-x="0.1" data-friction-y="0.1" data-scalar-x="25" data-scalar-y="15"
			id="scene">
			<li class="layer" data-depth="0.00">
			</li>
			<!-- BG -->

			<li class="layer" data-depth="0.10">
				<div class="background">
				</div>
			</li>

			<!-- Hero -->

			<li class="layer" data-depth="0.20">
				<div class="title">
					<h2>
						我早上起来发现<br />今天天气很好<br />天空也很蓝<br />也有很多干净的云朵<br />很多时候会觉得<br />喜欢的东西和你分享后<br />欢乐就会加倍<br />你会不会也是这样想的
					</h2>
					<span class="line"></span>
				</div>
			</li>

			<li class="layer" data-depth="0.25">
				<div class="sphere">
					<img alt="sphere" src="images/sphere.png">
				</div>
			</li>

			<li class="layer" data-depth="0.30">
				<div class="hero">
					<h1 id="countdown">
						<div><b id="my_days"></b><span>days</span></div>
						<div><b id="my_hours"></b><span>hrs</span></div>
						<div><b id="my_mins"></b><span>min</span></div>
						<div><b id="my_secs"></b><span>sec</span></div>
					</h1>

					<p class="sub-title">
						我们一年啦！！!
					</p>
				</div>
			</li>
			<!-- Flakes -->

			<li class="layer" data-depth="0.40">
				<div class="depth-1 flake1">
					<img alt="flake" src="images/flakes/depth1/flakes1.png">
				</div>

				<div class="depth-1 flake2">
					<img alt="flake" src="images/flakes/depth1/flakes2.png">
				</div>

				<div class="depth-1 flake3">
					<img alt="flake" src="images/flakes/depth1/flakes3.png">
				</div>

				<div class="depth-1 flake4">
					<img alt="flake" src="images/flakes/depth1/flakes4.png">
				</div>
			</li>

			<li class="layer" data-depth="0.50">
				<div class="depth-2 flake1">
					<img alt="flake" src="images/flakes/depth2/flakes1.png">
				</div>

				<div class="depth-2 flake2">
					<img alt="flake" src="images/flakes/depth2/flakes2.png">
				</div>
			</li>

			<li class="layer" data-depth="0.60">
				<div class="depth-3 flake1">
					<img alt="flake" src="images/flakes/depth3/flakes1.png">
				</div>

				<div class="depth-3 flake2">
					<img alt="flake" src="images/flakes/depth3/flakes2.png">
				</div>

				<div class="depth-3 flake3">
					<img alt="flake" src="images/flakes/depth3/flakes3.png">
				</div>

				<div class="depth-3 flake4">
					<img alt="flake" src="images/flakes/depth3/flakes4.png">
				</div>
			</li>

			<li class="layer" data-depth="0.80">
				<div class="depth-4">
					<img alt="flake" src="images/flakes/depth4/flakes.png">
				</div>
			</li>

			<li class="layer" data-depth="1.00">
				<div class="depth-5">
					<img alt="flake" src="images/flakes/depth5/flakes.png">
				</div>
			</li>
			<!-- Contact -->

			<li class="layer" data-depth="0.20">
				<div class="contact">
					<ul class="icons">
						<li>
							<a class="twitter" href="./record.html"><i class="fa fa-twitter"></i></a>
						</li>
					</ul>
					Copyright &copy;&nbsp;&nbsp;2020.Love you, Miss Qin.
				</div>
			</li>
		</ul>
	</div>

	<!-- Javascript -->
	<script src="js/plugins.js"></script>
	<!-- <script src="js/jquery.countdown.min.js"></script> -->
	<script src="js/main.js"></script>
	<script>
		setInterval(function () {

			//实时时间
			var date = new Date();
			var day = date.getDate();
			var hours = date.getHours();
			var mins = date.getMinutes();
			var sec = date.getSeconds();

			//天数差
			var date_diff = parseInt(Date.now() / 1000) - 1571760000;

			console.log(day, hours, mins, sec)
			document.getElementById("my_days").innerHTML = parseInt(date_diff / 60 / 60 / 24);
			document.getElementById("my_hours").innerHTML = ((hours >= 10) ? hours : ("0" + hours));
			document.getElementById("my_mins").innerHTML = ((mins >= 10) ? mins : ("0" + mins));
			document.getElementById("my_secs").innerHTML = ((sec >= 10) ? sec : ("0" + sec));
		}, 1000);
	</script>
	<!-- 烟花特效 -->
	<script type="text/javascript" src="js/jquery.fireworks.js"></script>
	<script type="text/javascript">
			// $('.jq22').fireworks({ 
			//   sound: false, // sound effect
			//   opacity: 0.2, 
			//   width: '100%', 
			//   height: '100%' 
			// });
	</script>
</body>

</html>